<template>
	<view>
		<view class="headBox">
			<image src="/static/image/myhead3.png" mode="" class="backgroundImg"></image>
			<view class="headImg">
				<image :src="avatar_url" mode=""></image>
			</view>
			<view class="userName">{{nickname}}</view>
		</view>
		<view class="content">
			<view class="item" @click="openMyOrder()">
				<image src="/static/image/myorder.png" mode=""></image>
				<text class="">我的订单</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
			<view class="item" @click="openMyData()">
				<image src="/static/image/mydata.png" mode=""></image>
				<text class="">编辑资料</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
			<view class="item" @click="openMyIncome()">
				<image src="/static/image/myincome.png" mode=""></image>
				<text class="">我的收入</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
			<view class="item" @click="openMyCalendar()">
				<image src="/static/image/mycalendar.png" mode=""></image>
				<text class="">我的档期</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
			<view class="item" @click="openMyLeave()">
				<image src="/static/image/aboutme.png" mode=""></image>
				<text class="">请假申请</text>
				<uni-icon type="arrow" size="20" color="#e5e5e5" class="icon-right"></uni-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {dns} from '@/pages/dns.js';
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		data(){
			return {
				nickname: '',
				avatar_url: ''
			}
		},
	    components: {
			uniIcon
		},
		watch:{
			userName(newValue, oldValue){
				console.log(newValue)
			}
		},
		onLoad() {
			this.getWoManList()
		},
		onShow() {
			
		},
		methods:{
			getWoManList(){//获取月嫂个人中心资料
				uni.request({
					method: 'GET',
					header: {
						token: uni.getStorageSync("token")
					},
					url: dns + 'matron/data',
					success: (res)=>{
						if(res.data.status == -1){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
							this.ifShow = true;
							return;
						}
						if(res.data.status == 1){
							this.nickname = res.data.data.name;
							this.avatar_url = res.data.data.head_url;
						}
					}
				})
			},
			openMyOrder(){//进入我的订单
				uni.navigateTo({
					url: '/pages/my/womanport/myorder/index'
				})
			},
			openMyData(){//进入编写资料
				uni.navigateTo({
					url: '/pages/my/womanport/mydata/index'
				})
			},
			openMyIncome(){//进入我的收入
				uni.navigateTo({
					url: '/pages/my/womanport/myincome/index'
				})
			},
			openMyCalendar(){//进入我的档期
				uni.navigateTo({
					url: '/pages/my/womanport/mycalendar/index'
				})
			},
			openMyLeave(){//进入请假申请
				uni.navigateTo({
					url: '/pages/my/womanport/myleave/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff
	}
	.headBox{
		position: relative;
		width: 100%;
		height: 300upx;
		background-color: #fff;
		.backgroundImg{
			width: 100%;
			height: 100%;
		}
		.headImg{
			position: absolute;
			top: 40upx;
			left: 50%;
			width: 140upx;
			height: 140upx;
			overflow: hidden;
			border-radius: 50%;
			transform: translate(-50%,0);
			box-shadow: 0 0 20upx rgba(0,0,0,.3);
			border: 4upx solid #fff;
			background-color:aliceblue;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.userName{
			position: absolute;
			bottom: 60upx;
			left: 50%;
			transform: translate(-50%,0);
			color: #fff;
			font-size: 32upx;
			font-weight: bold
		}
	}
	.content{
		margin-top: 16upx;
		.item{
			position: relative;
			font-size: 30upx;
			line-height: 100upx;
			background-color: #fff;
			padding: 0 110upx;
			border-bottom: 2upx solid #fafafa;
			image{
				position: absolute;
				top: 24upx;
				left: 40upx;
				width: 50upx;
				height: 50upx;
			}
			.icon-right{
				position: absolute;
				top: 6px;
				right: 40upx;
			}
		}
	}
</style>
